<?php $this->load->view('header');?>
<body class="childrenBody" style="background-color: #f2f4f8">

	<div style="padding: 0 20px;">
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
		  <ul class="layui-tab-title">
		    <li class="layui-this">会员增长</li>
		    <li>会员属性</li>
		  </ul>
		  <div class="layui-tab-content">
		  	<!-- 会员增长 -->
		    <div class="layui-tab-item layui-show">
		    	<div class="stat">
					<div class="total_left">
						<div class="left_one">
							<p class="tip_title">今日新增会员</p>
							<p class="num"><?=$d_num?></p>
							<p class="count_num">
								昨日：<?=$ys_num?>
								<br>
								本周：<?=$w_num?>
								<br>
								本月：<?=$m_num?>
							</p>
						</div>
						<div class="left_right">
							<p class="tip_title">今日付费会员</p>
							<p class="num"><?=$d_num2?></p>
							<p class="count_num">
								昨日：<?=$ys_num2?>
								<br>
								本周：<?=$w_num2?>
								<br>
								本月：<?=$m_num2?>
							</p>
						</div>
					</div>
					<div class="total_right">
						<div class="_top">
							<b>场馆转化</b>
						</div>
						<div class="_bottom">
							<ul>
								<li id="_ord" onmouseover="tips_percen('100%','_ord');">全部会员<br><?=$member_num?>人</li>
								<li id="_vip" onmouseover="tips_percen('<?=$vip_percen?>','_vip');">付费会员<br><?=$vip_num?>人</li>
								<li id="_vips" onmouseover="tips_percen('<?=$renew_percen?>','_vips');">续费会员<br><?=$renew_num?>人</li>
							</ul>
						</div>
					</div>
				</div>

				<div style="width: 100%;height: 320px;background-color: #fff;margin:30px 0;">	
					<div class="layui-tab" lay-filter="dateConta">
					  <ul class="layui-tab-title">
					    <li class="layui-this">新增会员</li>
					    <li>新增付费会员</li>
					    <li>付费会员</li>
					    <li>积累会员</li>
					  </ul>
					  <div class="layui-tab-content">
					    <div class="layui-tab-item layui-show">
							<div class="layui-btn-group">
								<button class="layui-btn layui-btn-primary layui-btn-small ThirtyBtn clickbtclass">近30天</button>
								<button class="layui-btn layui-btn-primary layui-btn-small FifteenBtn">近15天</button>
								<button class="layui-btn layui-btn-primary layui-btn-small SevenBtn">近7天</button>
							</div>
							<div class="layui-inline">
						      <div class="layui-input-inline">
						        <input type="text" class="layui-input" id="test0" placeholder="选择时间段" style="height: 32px;">
						      </div>
							</div>
							<div id="container0" style="height: 300px;margin-top: 15px;"></div>
					    </div>
					    <div class="layui-tab-item">
					    	<div class="layui-btn-group">
								<button class="layui-btn layui-btn-primary layui-btn-small ThirtyBtn clickbtclass">近30天</button>
								<button class="layui-btn layui-btn-primary layui-btn-small FifteenBtn">近15天</button>
								<button class="layui-btn layui-btn-primary layui-btn-small SevenBtn">近7天</button>

							</div>
							<div class="layui-inline">
						      <div class="layui-input-inline">
						        <input type="text" class="layui-input" id="test1" placeholder="选择时间段" style="height: 32px;">
						      </div>
							</div>
							<div id="container1" style="height: 300px;margin-top: 15px;"></div>
					    </div>
					    <div class="layui-tab-item">
					    	<div class="layui-btn-group">
								<button class="layui-btn layui-btn-primary layui-btn-small ThirtyBtn clickbtclass">近30天</button>
								<button class="layui-btn layui-btn-primary layui-btn-small FifteenBtn">近15天</button>
								<button class="layui-btn layui-btn-primary layui-btn-small SevenBtn">近7天</button>
							</div>
							<div class="layui-inline">
						      <div class="layui-input-inline">
						        <input type="text" class="layui-input" id="test2" placeholder="选择时间段" style="height: 32px;">
						      </div>
							</div>
							<div id="container2" style="height: 300px;margin-top: 15px;"></div>
					    </div>
					    <div class="layui-tab-item">
					    	<div class="layui-btn-group">
								<button class="layui-btn layui-btn-primary layui-btn-small ThirtyBtn clickbtclass">近30天</button>
								<button class="layui-btn layui-btn-primary layui-btn-small FifteenBtn">近15天</button>
								<button class="layui-btn layui-btn-primary layui-btn-small SevenBtn">近7天</button>
							</div>
							<div class="layui-inline">
						      <div class="layui-input-inline">
						        <input type="text" class="layui-input" id="test3" placeholder="选择时间段" style="height: 32px;">
						      </div>
							</div>
							<div id="container3" style="height: 300px;margin-top: 15px;"></div>
					    </div>
					  </div>
					</div>
				</div>
			</div>

			<!-- 会员属性 -->
		    <div class="layui-tab-item">
				<div class="attr_left">
					<div class="_top">
						<b>付费情况</b>
					</div>
					<div class="grapie">
						 <div id="consu"></div>
					</div>
				</div>
				<div class="attr_right">
					<div class="_top">
						<b>性别比例</b>
					</div>
					<div class="grapie">
						<div id="sex"></div>
					</div>
				</div>
				<div class="attr_left">
					<div class="_top">
						<b>年龄分布</b>
					</div>
					<div class="sexChars">
						<div class="layui-btn-group">
							<button class="layui-btn layui-btn-primary layui-btn-small sexBtn clickbtclass">男性</button>
							<button class="layui-btn layui-btn-primary layui-btn-small sexBtn">女性</button>
						</div>
					</div>
					<div id="ageBar"></div>
				</div>
				<div class="attr_right">
					<div class="_top">
						<b>预约分布（30天）</b>
					</div>
					<div class="">
						<div id="container"></div>
					</div>
				</div>
		    </div>
		  </div>

		</div>
	</div>

	<script type="text/javascript">
	layui.config({
		version: true
	}).use(['jquery','element','form','laydate','layer'],function(){
		var element = layui.element,
			laydate = layui.laydate,
			form = layui.form,
			layer = layui.layer,
			$ = layui.jquery;

		element.on('tab(docDemoTabBrief)', function(data)
		{
			var column = data.index;
			//会员属性
			if (column == 1) 
			{
				get_user_attr('consu');
				get_user_attr('sex');
				get_user_age(1);
				get_user_appoin();
			}
		});

		var _index = '0';

		var date=new Date();
		var maxDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+(date.getDate()-1); //获取当前年份

		load_data_list('0','30',_index);

		element.on('tab(dateConta)', function(data) 
		{
			_index = data.index;	//得到当前Tab的所在下标

			$(".ThirtyBtn").addClass("clickbtclass");
			$(".FifteenBtn").removeClass('clickbtclass');
			$(".SevenBtn").removeClass('clickbtclass');

			load_data_list(_index,'30',_index);

			//日期范围
			laydate.render({
				elem: '#test'+_index
				,range: true
				,max: maxDate
				,btns: ['confirm']
			    ,done: function(value, date, endDate)
			    {
			    	load_data_list(_index,value,_index);
					$(".ThirtyBtn").removeClass("clickbtclass");
					$(".FifteenBtn").removeClass('clickbtclass');
					$(".SevenBtn").removeClass('clickbtclass');
			    }
			});


		});

		//近30天
		$('.ThirtyBtn').click(function(event) 
		{
			load_data_list(_index,'30',_index);
			$(".ThirtyBtn").addClass("clickbtclass");
			$(".FifteenBtn").removeClass('clickbtclass');
			$(".SevenBtn").removeClass('clickbtclass');
		});

		//近15天
		$('.FifteenBtn').click(function(event) 
		{
			load_data_list(_index,'15',_index);
			$(".ThirtyBtn").removeClass("clickbtclass");
			$(".FifteenBtn").addClass('clickbtclass');
			$(".SevenBtn").removeClass('clickbtclass');
		});

		//近7天
		$('.SevenBtn').click(function(event) 
		{
			load_data_list(_index,'7',_index);
			$(".ThirtyBtn").removeClass("clickbtclass");
			$(".FifteenBtn").removeClass('clickbtclass');
			$(".SevenBtn").addClass('clickbtclass');
		});

		//日期范围
		laydate.render({
			elem: '#test'+_index
			,range: true
			,max: maxDate
			,btns: ['confirm']
		    ,done: function(value, date, endDate)
		    {
		    	load_data_list(_index,value,_index);
				$(".ThirtyBtn").removeClass("clickbtclass");
				$(".FifteenBtn").removeClass('clickbtclass');
				$(".SevenBtn").removeClass('clickbtclass');
		    }
		});

		//年龄分布性别
		$('.sexBtn').click(function(event) 
		{	
			var s = $(this).text() == '女性' ? 2 : 1;
			get_user_age(s);

			$('.sexBtn').removeClass('clickbtclass');
			$(this).addClass('clickbtclass');

		});


		//获取增长数据
		function load_data_list(ty,dn,ch_k)
		{
			//获取数据
			$.get('admin.php/UserSurvey/get_list',{type:ty,dnum:dn}, function(res) 
			{
				if (res.status == 200) 
				{	
					var d = res.user_num;
					var m = [];	
					for (var i = 0; i < d.length; i++) {
						m.push(parseInt(d[i]));
					}

					create_data_chars(ch_k,res.date_list,m);
				}

			},'json');

		}

		//获取会员属性数据
		function get_user_attr(piek)
		{	
			var act = piek == 'sex' ? 'user_sex' : 'user_consu';

			$.get('admin.php/UserSurvey/'+act, function(data) 
			{
				if (data.status == 200) 
				{
					var da = [];
					for (var i = 0; i < data.list.length; i++) {
						da.push(data.list[i]);
					}
					//创建图形
					create_pie(piek,da);
				}

			},'json');

		}


		//获取年龄分布数据
		function get_user_age(s)
		{
			$.get('admin.php/UserSurvey/user_age',{sex:s}, function(data) 
			{
				if (data.status == 200) {
					create_bar(data.list);
				}
			},'json');

		}

		//获取预约信息
		function get_user_appoin()
		{
			$.get('admin.php/UserSurvey/user_appoin', function(data) 
			{
				if (data.status == 200) {
					create_column(data.list);
				}
			},'json');
		}


		//生成折线图
		function create_data_chars(em,dt,da)
		{
			var chart = Highcharts.chart('container'+em, {
                title: {
                    text:null,
                },
                chart: {
					type:'spline'
				},
                xAxis:{
                	gridLineWidth: 1,
                	categories: dt
                },
                yAxis: {
                   title:'',
                   allowDecimals:false
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                series: [{
                        name: '数量',
                        data: da
                }],
                colors: ['#0cc3aa'],
        	});

		}

		//生成环形图
		function create_pie(em,da)
		{
			//会员属性
			var chart = Highcharts.chart(''+em+'', {
			    chart: {
			        spacing : [40, 0 , 40, 0],
			        height:345,
			        width:400,
			    },
			    title: {
			        floating:true,
			        text: ''
			    },

		        credits: {
		            enabled: false
		        },
				legend: {//控制图例显示位置
		            layout: 'vertical',
		            align: 'right',
		            verticalAlign: 'top',
				},
			    plotOptions: {
			        pie: {
			            allowPointSelect: true,
			            cursor: 'pointer',
			            dataLabels: {
			                enabled: true,
		                    format: '{point.percentage:.1f} %',
			                style: {
			                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
			                }
			            },
			            showInLegend: true //是否显示图例 false不显示
			        },
			    },
			    series: [{
			        type: 'pie',
			        innerSize: '80%',
			        name: '人数',
			        data: da,
			        colors: [
		                '#0f8df2',
		                '#0cc3aa',
		                '#cccccc'
		            ]
			    }]
			});
		}


		//生成条形图
		function create_bar(da)
		{
			var chart = Highcharts.chart('ageBar', {
		        chart: {
		            type: 'bar',
			        height:280,
		        },
		        title: {
		            text: null
		        },
		        credits: {
		            enabled: false
		        },
		        legend: {
		            enabled: false
		        },
		        exporting: {
		            enabled: false
		        },
		        xAxis: {
		            categories: ['18岁以下', '18-24岁', '25-30岁', '31-40岁', '41-50岁','51-60岁','61岁以上'],
		            gridLineWidth: 1,
		            tickWidth:0,        //设置刻度标签宽度
		        },
		        yAxis: {
		            title: null,
		            allowDecimals:false,
		            labels:{
		                enabled:false
		            }

		        },
		        plotOptions: {
		            bar: {
		                dataLabels: {
		                    enabled: true,  //显示数量提示
		                    color: '#000000',
		                    formatter : function() {
		                        return this.y+"人";  //返回百分比和个数
		                    }
		                }
		            }
		        },
		        series: [{
		            name: '人数',
		            data: da
		        }],
		        colors: ['#0f8df2']
		    });
		}


		//生成柱状图
		function create_column(ba)
		{
	        var chart = Highcharts.chart('container',{
		        chart: {
		            type: 'column',
		            height:350,
		        },
		        title: {
		            text: null
		        },
		        credits: {
		            enabled: false
		        },
		        legend: {
		            enabled: false
		        },
		        exporting: {
		            enabled: false
		        },
		        xAxis: {
					categories: ['0次', '1-5次', '6-10次', '11-15次', '15次以上'],
					tickWidth:0,        //设置刻度标签宽度
		        },
		        yAxis: {
		            title: null,
		            labels:{
		                enabled:false
		            }
		        },
		        plotOptions:{
		            column:{        
		                shadow: false,            //不显示阴影
		                dataLabels:{                //柱状图数据标签
		                     enabled:true,              //是否显示数据标签
		                     color:'#000000',        //数据标签字体颜色
		                     formatter: function() {        //格式化输出显示
		                          return (this.y)+"人";
		                      },
		                }
		            }, 
		        },           
		        series: [{
		            name: '人数',
		            data: ba
		        }],
		        colors:['#0cc3aa']
		    });
		}

	});

	//提示
	function tips_percen(percen,k)
	{
		layer.tips('转化：'+percen, '#'+k);
	}

	</script>

</body>
</html>